<template>
  <view>
    <z-paging
      ref="paging"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <view solt="top">
        <u-navbar title="收到简历" height="50"></u-navbar>
      </view>
      <u-gap height="20" bg-color="#F0F1F2"></u-gap>
      <view class="">
        <view class="message-box" v-for="(item, index) in itemList" :key="index">
          <view class="box-detail dis-flex flex-y-between flex-x-top">
            <view class="box-left dis-flex flex-y-between flex-y-center">
              <u-avatar
                class="avatar"
                style="align-self: center"
                src="../../static/img/xt.png"
                size="90"
              ></u-avatar>
              <u-icon
                v-if="item.gender == 1"
                class="gender"
                name="/static/ns1.png"
                size="28"
              ></u-icon>
              <u-icon v-else class="gender" name="/static/ns2.png" size="28"></u-icon>
              <view class="user-info" style="margin-left: 20rpx">
                <view class="user-name">用户昵称</view>
                <view class="user-des">
                  <text class="eq">13年</text>
                  <text class="eq">36岁</text>
                  <text class="eq">本科</text>
                </view>
              </view>
            </view>
            <view v-if="!item.is_read" class="box-read"></view>
          </view>
          <view class="box-qiw">求职期望：前端开发工程师</view>
          <view class="box-date dis-flex flex-y-between flex-y-center">
            <view class="date">03.19 17:56</view>
            <view class="bt" @click="routeTo('/users/job/receive-resume-detail?id=' + item.id)"
              >查看简历</view
            >
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      imgStyle: {
        width: '12rem'
      },
      itemList: [
        {
          is_read: 1,
          gender: 1,
          id: 2
        },
        {}
      ]
    }
  },
  methods: {
    queryList(page, pageSize) {
      this.initData(page, pageSize)
    },
    initData(page, pageSize) {
      //let self = this;
      // self.$u.api.getOrderList({
      // 	limit: pageSize,
      // 	page: page,
      // 	status: status
      // }).then(res => {
      // 	self.onOrderLoad(self.current, res.list, false);
      // }).catch(res => {
      // 	self.onOrderLoad(self.current, null, false);
      // });
      //this.onOrderLoad(this.current, this.itemList, false);
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  padding: 30rpx 20rpx;
  background-color: #f0f1f2;
}

.message-box {
  position: relative;
  height: 320rpx;
  background: #ffffff;
  margin-bottom: 20rpx;
  padding: 30rpx 20rpx;

  .box-detail {
    margin-bottom: 24rpx;

    .box-left {
      position: relative;

      .gender {
        position: absolute;
        left: 53rpx;
        bottom: -10rpx;
      }

      .user-info {
        height: 90rpx;
        padding: 2rpx 0;
        display: flex;
        justify-content: space-between;
        flex-flow: column;

        .user-name {
          font-weight: 600;
          font-size: 30rpx;
          color: #333333;
        }

        .user-des {
          font-size: 24rpx;
          color: #999999;

          .eq {
            margin-right: 12rpx;
            padding-right: 16rpx;
            border-right: 1rpx solid #999999;
          }

          .eq:last-child {
            border: none;
          }
        }
      }
    }

    .box-read {
      width: 16rpx;
      height: 16rpx;
      background: #fd4120;
      border-radius: 8rpx;
      margin-top: 20rpx;
    }
  }

  .box-qiw {
    font-size: 28rpx;
    color: #333333;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #e6e6e6;
    margin-bottom: 30rpx;
  }

  .box-date {
    font-size: 28rpx;
    color: #666666;

    .bt {
      width: 150rpx;
      height: 60rpx;
      border-radius: 30rpx;
      border: 1px solid #e6e6e6;
      line-height: 60rpx;
      text-align: center;
    }
  }
}
</style>
